<template>
  <el-dialog
    v-model="show"
    title="地区"
    :close-on-click-modal="false"
    width="50%"
    class="transport-dialog"
  >
    <div style="max-height: 60vh; overflow: auto" v-loading="loading">
      <el-tree
        node-key="areaId"
        ref="treeNode"
        :data="treeData"
        :props="defaultProps"
        show-checkbox
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show = false"> 取消 </el-button>
        <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      treeData: [],
      loading: false,
      defaultProps: {
        children: "children",
        label: "areaName",
        disabled: "disabled",
      },
    };
  },

  methods: {
    getList() {
      this.loading = true;
      http({
        url: http.adornUrl("/admin/area/list"),
        method: "get",
      }).then((res) => {
        let data = res.data;
        let result = this.setTreeData(data);
        this.treeData = result;
        this.$nextTick(() => {
          this.loading = false;
          this.$refs.treeNode.setCheckedNodes(this.chooseData, false);
        });
      });
    },
    setTreeData(allData) {
      let fu = allData.filter((item) => item.parentId == 0); // 所有父级
      let result = fu.map((item) => getData(item));
      return result;
      function getData(fu) {
        let result = allData.filter((item) => item.parentId == fu.areaId);
        fu.children = result;
        result.map((item) => getData(item));
        return fu;
      }
    },
    // 外部更新城市列表
    updateoffCityList(datas) {
      this.chooseData = datas;
      this.getList();
    },
    handleSubmit() {
      let data = this.$refs.treeNode.getCheckedNodes(false, false);
      this.show = false;
      this.$emit("ok", data);
    },
  },
};
</script>
